<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在线工具箱</title>
    <link rel="stylesheet" href="collection-style.css" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <!-- 错误上报器 -->
    <script src="error-reporter.js"></script>
  </head>
  <body>
    <div class="container">
      <header>
        <h1><i class="fas fa-toolbox"></i> 在线工具箱</h1>
        <p>一个简单、高效的在线工具集合</p>
      </header>

      <main>
        <div class="tool-grid">
          <!-- WebP Converter Tool -->
          <a href="/webp-converter" class="tool-card">
            <div class="tool-icon">
              <i class="fas fa-images"></i>
            </div>
            <div class="tool-info">
              <h3>WebP图片转换器</h3>
              <p>批量将图片转换为WebP格式</p>
            </div>
          </a>

          <!-- Text Diff Tool -->
          <a href="/text-diff" class="tool-card">
            <div
              class="tool-icon"
              style="
                background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
              "
            >
              <i class="fas fa-file-alt"></i>
            </div>
            <div class="tool-info">
              <h3>文本比对工具</h3>
              <p>比较两段文本并高亮显示差异</p>
            </div>
          </a>

          <!-- Timestamp Converter Tool -->
          <a href="/timestamp" class="tool-card">
            <div
              class="tool-icon"
              style="
                background: linear-gradient(135deg, #2980b9 0%, #6dd5fa 100%);
              "
            >
              <i class="fas fa-clock"></i>
            </div>
            <div class="tool-info">
              <h3>时间戳转换</h3>
              <p>秒/毫秒时间戳与日期格式互转</p>
            </div>
          </a>

          <!-- Base64 Tool -->
          <a href="/base64" class="tool-card">
            <div
              class="tool-icon"
              style="
                background: linear-gradient(135deg, #d38312 0%, #a83279 100%);
              "
            >
              <i class="fas fa-key"></i>
            </div>
            <div class="tool-info">
              <h3>Base64编解码</h3>
              <p>文本或文件的Base64编码和解码</p>
            </div>
          </a>

          <!-- API Tester Tool -->
          <a href="/api-tester" class="tool-card">
            <div
              class="tool-icon"
              style="
                background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
              "
            >
              <i class="fas fa-paper-plane"></i>
            </div>
            <div class="tool-info">
              <h3>API请求测试</h3>
              <p>发送HTTP请求并查看完整响应</p>
            </div>
          </a>

          <!-- Storage Tool -->
          <a href="/storage" class="tool-card">
            <div
              class="tool-icon"
              style="
                background: linear-gradient(135deg, #9b59b6 0%, #e74c3c 100%);
              "
            >
              <i class="fas fa-archive"></i>
            </div>
            <div class="tool-info">
              <h3>暂存室</h3>
              <p>暂存文本和文件，支持多端同步</p>
            </div>
          </a>

          <!-- Error Monitor Tool -->
          <a href="/error-monitor" class="tool-card">
            <div
              class="tool-icon"
              style="
                background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
              "
            >
              <i class="fas fa-bug"></i>
            </div>
            <div class="tool-info">
              <h3>错误监控</h3>
              <p>实时监控和查看应用错误</p>
            </div>
          </a>

          <!-- New Tool Placeholder -->
          <div class="tool-card placeholder">
            <div class="tool-icon">
              <i class="fas fa-plus"></i>
            </div>
            <div class="tool-info">
              <h3>敬请期待</h3>
              <p>更多工具正在开发中...</p>
            </div>
          </div>
        </div>
      </main>

      <footer>
        <p>&copy; 2024 在线工具箱. All Rights Reserved.</p>
      </footer>
    </div>
  </body>
</html>
